<template>
	<view :data-theme="theme">
		<view class="card">
			<view style="display: flex;padding: 20rpx; justify-content: space-between;">
				<view class="title-c bg_color" style="color: #fff;padding: 20rpx;border-radius: 8rpx;">
					{{cancelStatus[dataDetail.status] }}
				</view>
			</view>
			<h2>商品信息</h2>
			<view class="stockOrder" v-for="(ele,indexO) in dataDetail.getBusinessStockOrderTwoVOS">
				<view class="column">
					<view class="title">
						商家名称:
					</view>
					<view class="title-c">
						{{ele.merName}}
					</view>
				</view>
				<view class="businessStock">
					<u--image :showLoading="true" :src="ele.skuImage" width="80px" height="80px"
						class="top_left"></u--image>
					<view class="top_right" style="padding-left: 20rpx;">
						<view class="top_right_weight mb_10">[{{ele.brandName}}]{{ ele.productName }}</view>
						<view class="mb_10">商品规格： <span>{{ ele.skuName ? ele.skuName : '-' }}</span> </view>
						<view class="mb_10">申请退货数量： <span>×{{ ele.returnQuantity }}{{ele.skuUnit}}</span> </view>
						<view class="mb_10">实际退货数量： <span>{{ ele.actualQuantity ? ele.actualQuantity : '-' }}</span>
						</view>
						<!-- <view>规格单位： <span>{{ ele.skuUnit }}</span></view> -->
					</view>
				</view>
				<view style="margin:20rpx;border-bottom: 1px solid #f6f6f6"></view>
			</view>
			<view style="display: flex;justify-content: space-between;margin: 20rpx;padding-bottom: 30rpx;">
				<view class="title-left">
					合计数量
				</view>
				<view class="title-right" style="font-weight: bold;">
					{{dataDetail.totalQuantity}}
				</view>
			</view>
		</view>
		<view class="card">
			<h2>其他信息</h2>
			<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
			<view class="column">
				<view class="title">
					提货地址:
				</view>
				<view class="title-c">
					{{dataDetail.getBusinessStockOrderTwoVOS[0].depotName}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					下单时间:
				</view>
				<view class="title-c">
					{{dataDetail.createTime}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					退库单号:
				</view>
				<view class="title-c">
					{{dataDetail.orderNo}}
				</view>
			</view>
			<view class="column">
				<view class="title">
					提货码:
				</view>
				<view class="title-c">
					{{dataDetail.deliveryCode}}
				</view>
			</view>
		</view>

		<view class="content-footer"
			style="margin-top: 30rpx;margin-left: 10rpx;margin-right: 10rpx;padding-bottom: 30rpx;">
			<view style="display: flex;">
				<!-- <u-button v-if="dataDetail.status !== 2" style="flex: 1;" type="primary" :color="bgColor" :plain="true"
					text="取消退库" @click="refundOrder(item)"></u-button> -->
				<button class="plain_bgColor" v-if="dataDetail.status !== 2" style="flex: 1;" :color="bgColor" 
					 @click="refundOrder(item)">取消退库</button>
			</view>
		</view>
		<!-- 生态窗组件 -->
		<u-modal :show="showCancelOrder" showCancelButton @confirm="cancelOrder" :content='showCancelOrderInfo'
			@cancel="() => showCancelOrder = false">
		</u-modal>
	</view>
</template>

<script>
	import {
		cancelOrderAPi
	} from '@/api/cancelling.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataDetail: {},
				cancelSkuType: {
					1: '成品',
					2: '包装物',
				},
				cancelStatus: {
					1: '待出库',
					2: '已取出',
					3: '已取消'
				},
				showCancelOrder: false, //确认取消弹窗
				showCancelOrderInfo: '您确认取消该退库单吗？',
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let data = JSON.parse(options.data)
			this.dataDetail = data;
		},
		methods: {
			// 取消退库确认窗
			refundOrder(e) {
				this.showCancelOrder = true;
				this.ids = e.id;
			},
			// 确认取消退库操作
			cancelOrder() {
				cancelOrderAPi({
					ids: this.ids
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
				this.showCancelOrder = false;
			}
		}
	}
</script>

<style lang="scss">
	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px 0 20px 10px;
		padding-top: 20rpx
	}

	.mb_10 {
		margin-bottom: 10rpx;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}
	

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		.top_right {
			margin-left: 20rpx;
		}
	}

	.top_right_weight {
		font-weight: bold;
	}
</style>